<template>
<div class="home">
    <!-- <img alt="Vue logo" src="../assets/logo.png" class="home-logo"> -->
    <br><br><br><br><br>
    <HomeCarousel cards="visited" />
    <HomeWelcome msg="旅行，享受更美好的生活！" msg_en="Travel, enjoy a better life!" />
    <HomeFeatures />
    <HomePopular />
    <HomeFooter />
</div>
</template>

<script>
// @ is an alias to /src
import HomeWelcome from '@/components/HomeWelcome.vue'
import HomeCarousel from '@/components/HomeCarousel.vue'
import HomeFeatures from '@/components/HomeFeatures.vue'
import HomePopular from '@/components/HomePopular.vue'
import HomeFooter from '@/components/HomeFooter.vue'

export default {
    name: 'Home',
    components: {
        HomeCarousel,
        HomeWelcome,
        HomeFeatures,
        HomePopular,
        HomeFooter
    }
}
</script>

<style>
body {
    padding: 0;
    margin: 0;
}

html,
body,
#app {
    text-align: left;
}

.home-logo {
    padding-top: 40px;
    padding-bottom: 40px;
    height: 80px;
}

.home {
    text-align: center;
    background-color: #f8f9fa; /* 设置主页背景为偏灰色 */
    min-height: 100vh; /* 确保背景覆盖整个页面 */
}

/* 为轮播图设置偏灰色背景 */
.home .el-carousel {
    background-color: #f8f9fa;
}

/* 欢迎区域设置为偏灰色背景 */
.home .hello {
    background-color: #f8f9fa;
    padding: 40px 20px;
    margin: 0 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
</style>
